<template>
  <div class="gd">
    <div  v-for="(item, index) in message " :key="index">
      <div class="goods"  @click="goToProduct(message,index)">
        <img :src="message[index].pic" alt="" >
        <p>{{item.brand_name}}</p>
        <p>{{item.sub_title}} </p>
        <p>￥{{item.price}}-{{index}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: [
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' }
      ],
      dsa: {

      }
    }
  },
  methods: {
    goToProduct () {
      this.goToProduct = this.$goProdct
    }
  },
  mounted () {
    // console.log('d')
    // const params = 'publishStatus=' + '&verifyStatus=' + '&key='
    this.$axios.get('/pms/product/1/20', {
      headers: {
        authorization: sessionStorage.getItem('token')
      },
      params: {
        publishStatus: '',
        verifyStatus: '',
        key: ''
      }
    }
    ).then((res) => {
      // console.log(res.data)
      this.message = res.data.data.records
    }).catch(err => {
      console.error(err)
    })
  }
}
</script>
<style lang="less" scoped>
  .gd{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .goods{
      width: 240px;
      height: 300px;
      box-shadow: 1px 1px 1px 1px rgb(194, 194, 194);
      background-color: white;
      margin-top: 15px;
      // border: 1px solid rgba(180, 178, 178, 0.621);
      img{
        width: 190px;
        height: 190px;
        margin: 30px 25px 10px 25px;
      }
      p{
        width: 180px;
        height: 20px;
        margin: 0 35px;
        overflow: hidden;
      }
    }
  }
</style>
